<template>
  <div>
    <!-- 标题 -->
    <!-- <div class="new-title">
            数据去重
    </div>-->
    <!-- 转换名称 -->
    <div>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="转换名称:" prop="name">
          <el-input v-model="ruleForm.name" class="title-input" clearable @input="setName"></el-input>
        </el-form-item>
        <el-form-item label="去重字段:" prop="removal" class="displayInline new-width">
          <el-select
            v-model="ruleForm.removal"
            placeholder="请选择"
            required
            multiple
            :multiple-limit="5"
          >
            <el-option
              v-for="item in options"
              :key="item.logicColumnName"
              :label="item.logicColumnChineseName+'('+item.logicColumnName+')'"
              :value="item.logicColumnName"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item class="elSelect">
                    <ul class="displayInline">
                        <li
                            v-for="(i, index) in removalNum"
                            :key="index"
                            class="displayInline"
                        >
                            <el-select
                                v-model="choose[index]"
                                placeholder="请选择"
                                required
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.logicColumnName"
                                    :label="item.logicColumnChineseName+'('+item.logicColumnName+')'"
                                    :value="item.logicColumnName"
                                    :disabled="item.disabled"
                                ></el-option>
                            </el-select>
                        </li>
                    </ul>
                    <i
                        v-if="removalMax>0&&removalNum != removalMax"
                        class="iconfont icon-tianjia"
                        @click.stop="add"
                    ></i>
                    <i
                        v-if="removalNum != 0"
                        class="iconfont icon-jianqu"
                        @click.stop="sub"
                    ></i>
        </el-form-item>-->
        <el-form-item label="去重规则:" prop>
          <ul>
            <li class="displayInline">
              <el-select v-model="rule" clearable placeholder="请选择">
                <el-option
                  v-for="item in options0"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </li>
            <li class="displayInline">
              <el-select v-model="ruleColumn" clearable placeholder="请选择" @change="newRemoval">
                <el-option
                  v-for="item in optionsRule"
                  :key="item.logicColumnName"
                  :label="item.logicColumnChineseName+'('+item.logicColumnName+')'"
                  :value="item.logicColumnName"
                  :disabled="item.disabled"
                  @change.native="changeFlag"
                ></el-option>
              </el-select>
            </li>
          </ul>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      SourceData: {},
      ruleForm: {
        name: "数据去重",
        removal: "",
        flag: false
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入转换名称",
            trigger: ["blur", "change"]
          }
        ],
        removal: [
          {
            required: true,
            message: "请选择去重字段",
            trigger: ["blur", "change"]
          }
        ]
      },
      removalNum: 0,
      removalMax: 4,
      options0: [
        {
          value: "max",
          label: "最大(MAX)"
        },
        {
          value: "min",
          label: "最小(MIN)"
        }
      ],
      options: [],
      optionsRule: [],
      colums: [],
      choose: [],
      duplicateRemovalColumns: [],
      rule: "",
      ruleColumn: "",
      persentViewFoot: {},
      zeroFlag: false
    };
  },

  methods: {
    ...mapMutations("flow", ["setNodeName"]),
    refresh() {
      this.ruleForm.name = this.getViewFoot.name;
    },
    setName() {
      const data = {
        name: this.ruleForm.name,
        id: this.getViewFoot.id,
        that: this
      };
      this.setNodeName(data);
    },
    add() {
      if (this.removalNum < this.removalMax && this.removalNum >= 0) {
        this.removalNum++;
      } else if (this.removalNum == this.removalMax) {
        this.$message({
          message: "最多能添加5条去重字段",
          type: "warning"
        });
      }
    },
    sub() {
      if (this.removalNum <= 4 && this.removalNum > 0) {
        if (this.removalNum == this.choose.length) {
          this.choose.pop();
          this.cutColum();
        }
        this.removalNum--;
      }
    },
    changeFlag() {
      // this.zeroFlag=true;
    },
    // 选择下边互斥一下
    newRemoval() {
      this.options.forEach((item, index) => {
        if (this.ruleColumn == item.logicColumnName) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });
    },
    cutColum() {
      // if (this.zeroFlag) {
      // }
      this.duplicateRemovalColumns = [];
      this.options = JSON.parse(JSON.stringify(this.colums));
      this.optionsRule = JSON.parse(JSON.stringify(this.colums));
      const arr = JSON.parse(JSON.stringify(this.colums));
      // for (let i = 0; i < this.optionsRule.length; i++) {
      //     if (
      //         this.optionsRule[i].logicColumnType != 'int'
      //         && this.optionsRule[i].logicColumnType != 'double'
      //         && this.optionsRule[i].logicColumnType != 'long'
      //         && this.optionsRule[i].logicColumnType != 'timestamp'
      //     ) {
      //         // this.optionsRule.splice(i,1);
      //         this.optionsRule[i].disabled = true;
      //     }
      // }
      this.optionsRule = arr.filter(
        item =>
          item.logicColumnType == "int" ||
          item.logicColumnType == "double" ||
          item.logicColumnType == "long" ||
          item.logicColumnType == "timestamp"
      );
      if (this.ruleForm.removal && this.ruleForm.removal != "") {
        this.duplicateRemovalColumns = this.ruleForm.removal;
      }
      this.optionsRule.forEach((item, index) => {
        if (
          this.ruleForm.removal.length &&
          this.ruleForm.removal.includes(item.logicColumnName)
        ) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });

      console.log(this.ruleForm.removal, "是什么");
      // this.duplicateRemovalColumns = this.duplicateRemovalColumns.concat(
      //     this.choose,
      // );
      // 去重来一波

      for (let a = 0; a < this.duplicateRemovalColumns.length; a++) {
        if (this.duplicateRemovalColumns[a] == this.ruleColumn) {
          this.ruleColumn = "";
        }
      }
      for (let j = 0; j < this.duplicateRemovalColumns.length; j++) {
        for (let i = 0; i < this.options.length; i++) {
          if (
            this.options[i].logicColumnName == this.duplicateRemovalColumns[j]
          ) {
            this.options[i].disabled = true;
          }
        }
        for (let k = 0; k < this.optionsRule.length; k++) {
          if (
            this.optionsRule[k].logicColumnName ==
            this.duplicateRemovalColumns[j]
          ) {
            this.optionsRule[k].disabled = true;
          }
        }
      }
    }
  },
  mounted() {
    this.$store.commit("setDelFlag", false);
    this.persentViewFoot = JSON.parse(JSON.stringify(this.getViewFoot));
    if (
      this.getOperatorInfo[this.getViewFoot.id] &&
      this.getOperatorInfo[this.getViewFoot.id].ruleForm &&
      this.getOperatorInfo[this.getViewFoot.id].ruleForm.flag
    ) {
      this.SourceData = JSON.parse(
        JSON.stringify(this.getOperatorInfo[this.getViewFoot.id])
      );
      this.colums = this.SourceData.colums;
      this.options = JSON.parse(JSON.stringify(this.colums));
      this.optionsRule = JSON.parse(JSON.stringify(this.colums));
      this.choose = this.SourceData.choose;
      this.ruleForm = this.SourceData.ruleForm;
      this.ruleColumn = this.SourceData.ruleColumn;
      this.rule = this.SourceData.rule;
      this.removalMax = this.SourceData.removalMax;
      this.removalNum = this.SourceData.removalNum;

      // for (var i = 0; i < this.optionsRule.length; i++) {
      //     if (
      //         this.optionsRule[i].logicColumnType != 'int'
      //         && this.optionsRule[i].logicColumnType != 'double'
      //         && this.optionsRule[i].logicColumnType != 'long'
      //         && this.optionsRule[i].logicColumnType != 'timestamp'
      //     ) {
      //         // this.optionsRule.splice(i,1);
      //         this.optionsRule[i].disabled = true;
      //     }
      // }
      this.optionsRule = arr.filter(
        item =>
          item.logicColumnType == "int" ||
          item.logicColumnType == "double" ||
          item.logicColumnType == "long" ||
          item.logicColumnType == "timestamp"
      );
    } else {
      this.ruleForm.flag = true;
      this.ruleForm.name = this.getViewFoot.name;
      let data;
      if (
        this.$store.state.tree.readOnlyFlag &&
        (!this.$store.state.tree.isLink ||
          this.getSubmitInfo[this.getViewFoot.id])
      ) {
        data = JSON.parse(
          JSON.stringify(this.getSubmitInfo[this.getViewFoot.id])
        );
        this.ruleColumn = data.ruleColumn;
        this.rule = data.rule;
        if (
          data.duplicateRemovalColumns &&
          data.duplicateRemovalColumns.length
        ) {
          this.duplicateRemovalColumns = data.duplicateRemovalColumns.split(
            ","
          );
          this.ruleForm.removal = this.duplicateRemovalColumns;
          const thisChoose = JSON.parse(
            JSON.stringify(this.duplicateRemovalColumns)
          );
          thisChoose.shift();
          this.choose = thisChoose;
          this.removalNum = this.choose.length;
        }
        this.colums = data.outPut;
      } else {
        data = JSON.parse(
          JSON.stringify(this.getSubmitInfo[this.getViewFoot.preNode])
        );
        this.colums = data.outPut;
      }

      if (this.colums.length <= 5) {
        this.removalMax = this.colums.length - 1;
      }
      this.options = JSON.parse(JSON.stringify(this.colums));
      this.optionsRule = JSON.parse(JSON.stringify(this.colums));
      // for (let i = 0; i < this.optionsRule.length; i++) {
      //     if (
      //         this.optionsRule[i].logicColumnType != 'int'
      //         && this.optionsRule[i].logicColumnType != 'double'
      //         && this.optionsRule[i].logicColumnType != 'long'
      //         && this.optionsRule[i].logicColumnType != 'timestamp'
      //     ) {
      //         // this.optionsRule.splice(i,1);
      //         this.optionsRule[i].disabled = true;
      //     }
      // }
      this.optionsRule = arr.filter(
        item =>
          item.logicColumnType == "int" ||
          item.logicColumnType == "double" ||
          item.logicColumnType == "long" ||
          item.logicColumnType == "timestamp"
      );
    }
  },
  destroyed() {
    // 如果是删除节点禁止触发销毁钩子
    if (this.getDelFlag) {
      this.$store.commit("setDelFlag", false);
    } else {
      const ids = this.persentViewFoot.id; // id
      const value = {
        colums: this.colums,
        choose: this.choose,
        ruleForm: this.ruleForm,
        ruleColumn: this.ruleColumn,
        rule: this.rule,
        removalMax: this.removalMax,
        removalNum: this.removalNum
      }; // 对象
      const obj = {};
      obj[ids] = value;
      this.$store.commit("setOperatorInfo", obj); // 将对象存入store，kye-value形式
      // 存放本算子信息，最终提交用
      const submitIds = this.persentViewFoot.id; // id
      // 根据节点id匹配节点坐标
      const arr = this.flowList.nodeList.filter(
        item => this.persentViewFoot.id === item.id
      );
      const submitValue = {
        operateName: this.ruleForm.name,
        operateType: "5",
        location: `${arr[0].top},${arr[0].left}`,
        duplicateRemovalColumns: String(this.duplicateRemovalColumns),
        rule: this.rule,
        ruleColumn: this.ruleColumn,
        orderNumber: this.persentViewFoot.id,
        outPut: this.colums
      };
      const submitObj = {};
      submitObj[submitIds] = submitValue;
      this.$store.commit("setSubmitInfo", submitObj);
    }
  },
  watch: {
    getViewFoot: {
      handler(val, old) {
        this.refresh();
      },
      deep: true
    },
    removalThis(val) {
      this.cutColum();
    },
    choose(val) {
      this.cutColum();
    }
  },
  computed: {
    ...mapGetters([
      "getSourceInfo",
      "getViewFoot",
      "getOperatorInfo",
      "getSubmitInfo",
      "setDelFlag"
    ]),
    removalThis() {
      return this.ruleForm.removal;
    },
    flowList() {
      return this.$store.state.flow.flowList;
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.add-foot {
  text-align: right;
  margin-top: 20px;
}
.new-title {
  color: #0090ff;
  margin-bottom: 10px;
}
/deep/ {
  .new-width {
    width: 482px !important;
    .el-input__inner {
      width: 100% !important;
    }
    .el-tag__close {
      top: -8px;
    }
    .el-select__tags-text {
      width: 80px !important;
      display: inline-block !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
    }
  }
  .title-input,
  .displayInline {
    .el-input__inner {
      width: 180px;
    }
  }
  .title-input {
    width: 180px;
  }
}
.displayInline {
  display: inline-block;
}
.elSelect {
  display: inline-block;
  /deep/ {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
.new-scroll {
  overflow: auto;
  height: 200px;
  flex: 1;
}
.iconfont {
  color: #0090ff;
  font-size: 14px;
  cursor: pointer;
  margin-left: 8px;
}
</style>
